<template>
	<view class="pages">
		<view class="bg"
			style="background-image: url('https://ctrlsoft.net.cn/app_static/hesaid//img/wshing/Slice.png');display: flex;align-items: center;background-repeat: no-repeat;">
			<view class="">
				<uni-icons custom-prefix="back" type="back" size="30" color="white" @tap='Black'></uni-icons>
			</view>
		</view>
		<view class="second">
			<view class="box">
				<view class="box_center">
					<view class="bod">
						<image class="box_img"
							:src="obj.expertAvatar !=null ? obj.expertAvatar : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'"
							mode="aspectFill"></image>
					</view>
				</view>
				<view class="box_font">
					<text class="font_text">{{obj.expertName ? obj.expertName : '--'}}</text>
					<view class="fonst_l">
						<image :src="getImgUrl('/img/wshing/tab.png')" class="right_img"></image>
						{{obj.consultationUnitPrice ? obj.consultationUnitPrice : '--'}}/分钟
					</view>
				</view>
				<view class="box_footer">
					<view class="haop">咨询问题:</view>
					<view class="content">
						{{obj.consultationQuestions ? obj.consultationQuestions : ''}}
					</view>
					<view class="haop">咨询时间: {{obj.consultationTime ? obj.consultationTime : '--'}}</view>
					<view class="haop">咨询时长: {{obj.consultationDuration ? obj.consultationDuration : '--'}}(分钟)</view>
					<view class="haop">咨询类型: {{obj.consultantType == 0 ? '视频' : '线下'}}</view>
					<view class="haop" style="text-align: right;">
						<image :src="getImgUrl('/img/wshing/tab.png')" class="right_img"></image>
						共支付: {{obj.heSaidPrice ? obj.heSaidPrice : '--'}}
					</view>
				</view>
			</view>
			<view class="footer">
				<button class="btn3" @click="completeOrder" v-if="status">支付</button>
				<view class="info">
					<image :src="getImgUrl('/img/wshing/tab.png')" class="right_img"></image>余额{{tbCount}}
				</view>
			</view>
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="successDialog" type="dialog" @maskClick='close'>
				<view class="uni_dia">
					<view class="uni_sucess">
						{{emsg}}
					</view>
					<view class="uni_font" style="width: 490rpx;margin-top: 60rpx;line-height: 40rpx;">
						谢谢惠顾
					</view>
					<!-- <button class="uni_btn" @click="close">确定</button> -->
				</view>
				<!-- </uni-popup-dialog> -->
			</uni-popup>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<view class="uni_dia">
					<view class="uni_sucess">
						支付失败
					</view>
					<view class="uni_font" style="width: 490rpx;margin-top: 60rpx;line-height: 40rpx;">
						{{errMsg}} 【请联系 17096835856】
					</view>
				</view>

				<!-- </uni-popup-dialog> -->
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		orderDetail,
		completeOrder
	} from '@/utils/OnetoOneaApi.js'
	import {
		currency
	} from '../../../utils/myapi.js'
	import {
		imgBaseUrl,
		baseURL
	} from '@/utils/baseUrl.js'
	export default {
		props: {
		},
		data() {
			return {
				id: '',
				status: true,
				bg: imgBaseUrl + '/img/wshing/Slice.png',
				icons: imgBaseUrl + '/img/missimg/xiangzuojiantou.svg',
				obj: {},
				tbCount: 0,
				errMsg: '',
				emsg:''
			};
		},
		//获取传过来得id
		onLoad(op) {
			this.id = op.Id
			this.status = op.status == '1' ? false : true
			this.queyDetail(op.Id);
			this.getTBInfo()
		},
		methods: {
			//详情信息
			async queyDetail(id) {
				const data = await orderDetail(id);
				this.obj = data.result;
			},
			//获取他币信息
			async getTBInfo() {
				const userinfo = uni.getStorageSync('userInfo')
				const res = await currency(userinfo.id);
				if (res.result.balance) {
					this.tbCount = res.result.balance;
				}
			},
			confirmCompleteOrder(){
				
			},
			async completeOrder() {
				var id = this.obj ? this.obj.id : '';
				if (id) {
					const res = await completeOrder(id);
					console.log(res,'res');
					this.emsg = res.message
					if (typeof res === 'object' && res !== null) {
						this.$refs.successDialog.open();
					} else {
						this.errMsg = res;
						this.$refs.alertDialog.open();
					}
				} else {
					uni.showToast({
						title: '无效订单!',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'error',
						//显示持续时间为 2秒
						duration: 2000
					})
					var close = this.close;
					setTimeout(function() {
						close()
					}, 2000);
				}
			},
			close() {
				uni.navigateBack();
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//返回上一页
			Black() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="less">
	.pages {
		width: 100%;
		background-color: #F5F5F7;
		// height: 120vh;

		.bg {
			width: 100%;
			height: 20vh;
		}

		.second {
			width: 100%;
			// position: absolute;
			background-color: #F5F5F5;

			.box {
				position: relative;
				top: -20rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;

				.box_center {
					height: 122rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 40rpx 0rpx 40rpx;

					.box_img {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						border: 4rpx solid #F5F5F5;
						top: -45px;
					}

					.guanzhu {
						width: 146rpx;
						height: 64rpx;
						background: #FF7F22;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
						text-align: center;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 64rpx;
					}
				}

				.box_font {
					margin-left: 44rpx;
					line-height: 55rpx;

					.font_text {
						font-size: 40rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222229;
					}

					.fonst_l {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.box_footer {
					padding: 30rpx 20rpx;

					.haop {
						font-size: 26rpx;
						color: #666666;
					}

					.content {
						margin: 10rpx;
						padding: 10rpx;
						background: #F5F5F7;
						border-radius: 10rpx;
						min-height: 280rpx;
					}
				}
			}

			.footer {
				background-color: #FFFFFF;

				.btn3 {
					margin: 0 20rpx;
					height: 88rpx;
					background: #FF7F22;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.info {
					text-align: center;
					font-size: 26rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}

			.right_img {
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
			}
		}

		.uni_dia {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			background-color: white;
			border-radius: 20rpx;
			padding: 20px;

			.uni_sucess {
				font-size: 40rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 32rpx;
			}

			.uni_font {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 36rpx;
			}

			.uni_btn {
				width: 320rpx;
				height: 80rpx;
				background: #FF7F22;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #FFFFFF;
				margin-top: 68rpx;
			}
		}
	}
</style>